<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/start/jquery-ui-1.8.13.custom.css" />
<link rel="stylesheet" type="text/css" href="../css/toolbars.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/validate.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/jquery.tablesorter-update.css" />
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.ui.datepicker-es.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter-update.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript" src="../js/jquery.download.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('body').append(
            $('<div>').attr('id', 'loading').append(
                $('<img>').attr('src', '../images/ajax_loading.gif').attr('alt', 'Cargando...')
              ).css({
                  position: 'fixed',
                  display: 'none'
              })
    );
    
	$("#divReporteTemas").show("slow", function(){
		$('#_item').show();
		$('#_idNegocio').show();   
		$('#_idSitio').show();  
		$('#_idArea').show();  
	    CargarReporteTemas();
    });
        
	$("button").button();
	
	$("#btn_buscar").click(function(e){	
		if($.trim($('#fechaini').val()).length==0){
			Alerta('Ingrese una fecha de inicio');
		} else if($.trim($('#fechater').val()).length==0){
			Alerta('Ingrese una fecha de termino');
		}else{
	    	var formInput = $('form[id$=reporteForm]').serialize();
	    	$("#divTableReporteTema").show("slow", function(){
	    		fillBodyTemas("/repotemas",formInput,0);
	        });	
		}	

		e.preventDefault();
		e.stopPropagation();
	});
	
    $("#btn_exportar").click(function (e) {
        
		if($.trim($('#fechaini').val()).length==0){
			Alerta('Ingrese una fecha de inicio');
		} else if($.trim($('#fechater').val()).length==0){
			Alerta('Ingrese una fecha de termino');
		}else{
	    	var formInput = $('form[id$=reporteForm]').serialize();
	    	$.download('/repotemasexcel',formInput,'POST');
		}	

		e.preventDefault();
		e.stopPropagation();
    }); 	

    $("#idNegocio").change(function () {
        var idNegocio = $('#idNegocio').val();
        if(idNegocio!=0){
      	  CargarSitio2(idNegocio);
        }
    });	

    $("#idSitio").change(function () {
    	var idNegocio = $('#idNegocio').val();
        var idSitio = $('#idSitio').val();
        if(idNegocio!=0 && idSitio!=0){
   	     CargarArea2(idNegocio,idSitio);
        }
    });    

    $("#idTipo").change(function () {
    	$('#divTableReporteTema').empty();
    	var tipo = $('#idTipo').val();
    	if(tipo=='1'){
    		$('#_item').show();
    		$('#_idNegocio').show();   
    		$('#_idSitio').show();  
    		$('#_idArea').show();       	
    	} else if(tipo=='2'){
    		$('#_idNegocio').hide();
    		$('#_idSitio').hide();
    		$('#_idArea').hide();     	
    	}else if(tipo=='3'){
    		$('#_item').hide();
    		$('#_idNegocio').hide();
    		$('#_idSitio').hide();
    		$('#_idArea').hide();    	
    	}
    });	      
    var ahorita=new Date();
	$("#fechaini").datepicker({
		minDate:new Date(ahorita.getFullYear(),0,1),
		maxDate:new Date(ahorita.getFullYear(),11,31),
		showOn: "button",
		buttonImage: "../images/calendar.gif",
		buttonImageOnly: true
	});

	$("#fechater").datepicker({
		minDate:new Date(ahorita.getFullYear(),0,1),
		maxDate:new Date(ahorita.getFullYear(),11,31),
		showOn: "button",
		buttonImage: "../images/calendar.gif",
		buttonImageOnly: true
	});	
   
});

</script>
</head>
<body>
<div id="divReporteTemas" style="display:none;">
<form id="reporteForm">
<div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">

<input type="hidden" id="idItem" name="idItem" />

<div style="float:left; margin-right: 10px">
<label for="idTipo">Tipo</label><br /><select class="titulo" name="idTipo" id="idTipo"><option value="1">Detalle temas claves</option><option value="2">Consolidado por temas</option><option value="3">Consolidado por negocio</option></select>
</div>

<div style="float:left; margin-right: 10px">
<label for="fechaini">Desde</label><br /><input class="titulo" name="fechaini" id="fechaini"size="8"/>
</div>
<div style="float:left; margin-right: 10px">
<label for="fechater">Hasta</label><br /><input class="titulo" name="fechater" id="fechater" size="8"/>
</div>

<div style="display:none;float:left; margin-right: 10px" id="_item">
<label for="item">TCS</label><br /><select class="titulo" name='item' id="item"></select>
</div>

<div style="clear:both; padding:0px; margin:0px;"></div>

<div style="display:none;float:left;margin-right: 10px" id="_idNegocio"> 
<label for="idNegocio">Negocios</label><br /><select class="titulo" name='idNegocio' id='idNegocio'></select>
</div>

<div style="display:none;float:left; margin-right: 10px" id="_idSitio">
<label for="idSitio">Sitios</label><br /><select class="titulo" name='idSitio' id='idSitio'></select>
</div>

<div style="display:none;float:left;margin-right: 10px" id="_idArea">
<label for="idArea">Area</label><br /><select class="titulo" name='idArea' id='idArea'></select>
</div>

<div style="clear:both; padding:0px; margin:0px;"></div>

<div>
<button id="btn_buscar">Buscar</button>
<button id="btn_exportar">Exportar</button>
</div>


</div>

<div id="divTableReporteTema" style="display:none;" class="ui-widget" style="margin-top:2em;">
</div>
</form>
</div>
</body>
</html>
